import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, DatePicker, Form, Input, Modal, Row, Tabs} from 'antd';
import BizParams from '../common/BizParams';
import moment from 'moment';

const dateFormatter = "YYYY-MM-DD";

const R = require('ramda');
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;


const marketDetail = Form.create({ wrappedComponentRef: true })(class MarketDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false,
            dataSource: {}
        }
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }

    handleOpen = (disabled, dataSource) => {
        this.setState({ open: true, disabled: disabled, dataSource });
    }

    handleSave = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            values.id = this.props.dataSource && this.props.dataSource.id ? this.props.dataSource.id : null;
            values.marketTime = values.marketTime ? values.marketTime.format(dateFormatter) : values.marketTime;
            values.cid = this.state.dataSource.cid ? this.state.dataSource.cid : null;
            if (!R.equals(R.pick(Object.keys(values), this.props.dataSource), values)) {
                this.props.dispatch({
                    type: values.id ? 'market/updateMarketInfo' : 'market/createMarketInfo',
                    payload: {
                        dataSource: values,
                        onSuccess: () => {
                            this.handleCancel();
                            this.props.dispatch({
                                type: 'market/queryMarketListByCId',
                                payload: {
                                    cId: this.state.dataSource.cid,
                                    page: this.props.market.page
                                }
                            })
                        }
                    }
                })
            } else this.handleCancel();
        })
    }


    render() {

        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };

        const formItemLayout2 = { labelCol: { span: 5 }, wrapperCol: { span: 18 } };
        const textAreaLayout = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;

        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleSave.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        return (

            <Modal maskClosable={false} footer={footer} visible={this.state.open} title={"营销线索详情"} width={900} closable={false}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="营销对象" hasFeedback>
                                {getFieldDecorator('marketObject', {
                                    rules: [{ required: true, message: '请选择营销对象' }],
                                    initialValue: dataSource.marketObject
                                })(
                                    <BizParams disabled={this.state.disabled} sprCode="position" />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="实际营销时间" hasFeedback>
                                {getFieldDecorator('marketTime', {
                                    rules: [{ required: true, message: '请输入实际营销时间！' }],
                                    initialValue: dataSource.marketTime ? moment(dataSource.marketTime, dateFormatter) : undefined
                                })(<DatePicker disabled={this.state.disabled} style={{ width: '100%' }} />)}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="营销方式" hasFeedback>
                                {getFieldDecorator('marketMode', {
                                    rules: [{ required: true, message: '请选择营销方式！' }],
                                    initialValue: dataSource.marketMode
                                })(<BizParams disabled={this.state.disabled} sprCode="marketMode" />)}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="营销阶段" hasFeedback>
                                {getFieldDecorator('marketStage', {
                                    rules: [{ required: true, message: '请选择一种营销阶段！' }],
                                    initialValue: dataSource.marketStage
                                })(<BizParams disabled={this.state.disabled} sprCode="marketStage" />)}
                            </FormItem>
                        </Col>
                    </Row>
                    <Tabs tabPosition={'top'}>
                        <TabPane tab="工作事项" key="1">
                            <Row>
                                <Col span={24}>
                                    <FormItem {...textAreaLayout} label="营销目标" hasFeedback>
                                        {getFieldDecorator('marketTarget', {
                                            rules: [{ required: true, message: "请输入营销目标！" }],
                                            initialValue: dataSource.marketTarget
                                        })(<Input.TextArea disabled={this.state.disabled} autosize={{ minRows: 3 }} maxLength="2000" />)}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={24}>
                                    <FormItem {...textAreaLayout} label="本次交流内容" hasFeedback>
                                        {getFieldDecorator('exchangeContent', {
                                            rules: [{ required: true, message: "请输入本次交流内容" }],
                                            initialValue: dataSource.exchangeContent
                                        })(
                                            <Input.TextArea disabled={this.state.disabled} autosize={{ minRows: 3 }} maxLength="2000" />
                                            )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={24}>
                                    <FormItem {...textAreaLayout} label="客户反馈" hasFeedback>
                                        {getFieldDecorator('feedback', {
                                            rules: [{ required: true, message: "请输入客户反馈" }],
                                            initialValue: dataSource.feedback
                                        })(<Input.TextArea disabled={this.state.disabled} autosize={{ minRows: 3 }} maxLength="2000" />)}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={24}>
                                    <FormItem {...textAreaLayout} label="本次交流结论" hasFeedback>
                                        {getFieldDecorator('exchangeConclusion', {
                                            rules: [{ required: true, message: "请输入本次交流结论" }],
                                            initialValue: dataSource.exchangeConclusion
                                        })(
                                            <Input.TextArea disabled={this.state.disabled} autosize={{ minRows: 3 }} maxLength="2000" />
                                            )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label="成果定性" hasFeedback>
                                        {getFieldDecorator('result', {
                                            rules: [{ required: true, message: "请选择成果定性！" }],
                                            initialValue: dataSource.result
                                        })(
                                            <BizParams disabled={this.state.disabled} sprCode="marketResult" />
                                            )}
                                    </FormItem>
                                </Col>
                            </Row>
                        </TabPane>
                    </Tabs>
                </Form>

            </Modal>

        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.market, dataSource: state.market.dataSource, market: state.market
    };
}

export default connect(mapStateToProps)(marketDetail);